<script>
import { h } from 'vue'
import myComp from '../study2/diyDemo6.vue'

export default {
  name: 'diyDemo3',
  setup() {
    const renderContent = () => {
      return h('div', [
        h('h1', '通过vue的h函数自定义渲染'),
        h('p', '该内容使用setup中的渲染函数进行渲染'),
        h(
          'button',
          {
            onClick: () => {
              alert('点我！')
            }
          },
          '点我'
        ),
        h(myComp)
      ])
    }

    // 返回渲染函数作为自定义渲染的内容
    return {
      renderContent
    }
  },

  // 自定义渲染函数
  render() {
    // 调用 setup() 中返回的渲染函数
    return this.renderContent()
  }
}
</script>
